<template>
	<el-form ref="siteForm" size="medium" :model="portalForm" :rules="portalRules" class="portal_form_wrapper">
		<el-row :gutter="16" type="flex">
			<el-col :span="16">
				<el-col :span="24">
					<el-form-item label="站点名称" prop="name">
						<el-input v-model="portalForm.name"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="19">
					<el-form-item label="站点域名" prop="httpAddr">
						<el-input v-model="portalForm.httpAddr">
							<template slot="prepend">
								<el-select v-model="portalForm.httpType" style="width: 90px">
									<el-option label="http://" value="1"></el-option>
									<el-option label="https://" value="2"></el-option>
								</el-select>
							</template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="5">
					<el-form-item label="站点主色" prop="color">
						<color-picker v-model="portalForm.color"></color-picker>
					</el-form-item>
				</el-col>
				<el-col :span="24" class="site_feature">
					<el-form-item label="强制登录" prop="mustLogin">
						<el-switch v-model="portalForm.mustLogin" active-value="1" inactive-value="2"></el-switch>
					</el-form-item>
					<el-form-item label="用户注册" prop="isRegister">
						<el-switch v-model="portalForm.isRegister" active-value="1" inactive-value="2"></el-switch>
					</el-form-item>
					<el-form-item label="发布审核" prop="isAudit">
						<el-switch v-model="portalForm.isAudit" active-value="1" inactive-value="2"></el-switch>
					</el-form-item>
					<el-form-item label="人像检索" prop="isFace">
						<el-switch v-model="portalForm.isFace" active-value="1" inactive-value="2"></el-switch>
					</el-form-item>
					<el-form-item label="内容下载" prop="isDownload">
						<el-switch v-model="portalForm.isDownload" active-value="1" inactive-value="2"></el-switch>
					</el-form-item>
					<el-form-item label="是否有小程序端" prop="isApplet">
						<el-switch v-model="portalForm.isApplet" active-value="1" inactive-value="2"></el-switch>
					</el-form-item>
					<el-form-item label="是否关闭评论" prop="isComment">
						<el-switch v-model="portalForm.isComment" active-value="1" inactive-value="2"></el-switch>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="站点管理员" prop="userList">
						<person-list v-model="portalForm.userList"></person-list>
					</el-form-item>
				</el-col>
				<el-col :span="24" class="site_uploader">
					<el-form-item label="站点封面图" prop="filed1">
						<sw-image-uploader v-model="portalForm.filed1" accept="jpg,png"></sw-image-uploader>
					</el-form-item>
					<el-form-item label="网站LOGO" prop="logoId">
						<sw-image-uploader v-model="portalForm.logoId" accept="jpg,png"></sw-image-uploader>
					</el-form-item>
					<el-form-item label="首页尾LOGO" prop="filed2">
						<sw-image-uploader v-model="portalForm.filed2" accept="jpg,png"></sw-image-uploader>
					</el-form-item>
					<el-form-item label="首页背景图片" prop="filed3">
						<sw-image-uploader v-model="portalForm.filed3" accept="jpg,png"></sw-image-uploader>
					</el-form-item>
					<el-form-item label="登录背景图片" prop="filed4">
						<sw-image-uploader v-model="portalForm.filed4" accept="jpg,png"></sw-image-uploader>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="版权信息" prop="content">
						<u-Editor v-model="portalForm.content" :z-index="2000"></u-Editor>
					</el-form-item>
				</el-col>
			</el-col>
			<el-col :span="8" class="template">
				<el-form-item label="站点模板" prop="template">
					<el-radio-group v-model="portalForm.template">
						<el-row :gutter="16">
							<el-col :span="8" v-for="(item, index) in portalTempTypes" :key="index">
								<el-image :src="item.imgUrl" :preview-src-list="[item.imgUrl]"></el-image>
								<el-radio :label="item.value">{{ item.label }}</el-radio>
							</el-col>
						</el-row>
					</el-radio-group>
				</el-form-item>
			</el-col>
		</el-row>
	</el-form>
</template>

<script>
import personList from './person';
import colorPicker from './color';
import { mapActions } from 'vuex';
import { getDictDefineList } from '@/api/system/tbSysDictDefinition';
import { addedPortalSite, updatePortalSite } from '@/api/portal/tbSiteInfo';
export default {
	components: { personList, colorPicker },
	props: {
		data: { type: Object, default: () => {} },
		type: String
	},
	data() {
		return {
			portalForm: {},
			siteStyle: {},
			portalRules: {
				name: [{ required: true, message: '请填写站点名称', trigger: 'blur' }],
				color: [{ required: true, message: '请选择站点主色', trigger: 'change' }],
				httpAddr: [{ required: true, message: '请填写站点域名', trigger: 'blur' }]
			},
			portalTempTypes: []
		};
	},
	computed: {
		addOrEdit() {
			return this.type === 'add';
		}
	},
	watch: {
		async data(data) {
			let siteStyle = this.$isJSON(data.style) ? JSON.parse(data.style) : {};
			this.portalForm = { ...data };
			this.$set(this.portalForm, 'color', siteStyle.color);
			this.$set(this.portalForm, 'isComment', siteStyle.isComment);
		}
	},
	mounted() {
		this.getDictConstDetail();
	},
	methods: {
		...mapActions(['getFileUrl']),
		//获取字典常量详情
		async getDictConstDetail() {
			let params = { code: 'SITE_TEMPLATE' };
			let result = await getDictDefineList(params).then((res) => res.data);
			if(result.code === '0') {
				let datas = !!result.data && result.data.length > 0 ? result.data[0] : {};
				let configJson = !!datas.configJson && this.$isJSON(datas.configJson) ? JSON.parse(datas.configJson) : null;
				if(!configJson) {
					this.portalTempTypes = [];
				} else {
					let configOptions = configJson.options.map(async (item) => {
						return { ...item, imgUrl: await this.getFileUrl(item.img) };
					});
					this.portalTempTypes = await Promise.all(configOptions);
				}
			}
		},

		//提交表单
		submitForm() {
			this.$refs['siteForm'].validate(valid => {
				if(!valid) return false;
				this.submitFormRequest();
			})
		},

		//格式化请求参数
		formatRequestParams() {
			let params = { ...this.portalForm };
			params['style'] = { color: params.color, isComment: params.isComment };
			return params;
		},

		//表单提交请求
		async submitFormRequest() {
			let params = this.formatRequestParams();
			console.log(params);
			return false;
			let callFunction = eval(this.addOrEdit ? addedPortalSite : updatePortalSite);
			let result = await callFunction(params).then(res => res.data);
			console.log(result);
		}
	}
};
</script>

<style lang="scss" scoped>
.portal_form_wrapper::v-deep {
	padding: 16px;

	.el-form-item__label {
		float: none;
		font-weight: bold;
	}

	.el-radio-group {
		width: 100%;

		.el-col {
			margin-bottom: 16px;
		}

		.el-radio {
			margin-top: 10px;
		}
	}

	.template {

		.el-image {
			position: relative;
			width: 100%;
			padding-top: 125%;
			overflow: hidden;

			img {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: auto;
			}

			.el-image__error {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		}
	}
}

.site_feature::v-deep, .site_uploader::v-deep {
	.el-form-item {
		float: left;
		margin-right: 20px;

		&:last-child {
			margin-right: 0;
		}
	}

	.el-form-item__label {
		padding-right: 8px;
	}
}
</style>